import React, {Component} from 'react'
import classname from 'classnames';
import ReIcon from 'components/widgets/ReIcon';
import './PersonalInfoItem.less'

export default class PersonalInfoItem extends Component {

    constructor(props) {
        super(props)
    }

    render() {
        let itemClassnames = classname({
            'personal-info-item-wrapper': true,
            'psersonal-info-item-wrapper-uncheck': !this.props.isChecked
        }, this.props.className)
        let itemIconClassname = classname({
            'item-icon-wrapper': true,
            'icon-active': this.props.isChecked,
        })
        let itemTitleClassname = classname({
            'item-title': true,
            'item-title-active': this.props.isChecked
        })
        return <div className={itemClassnames} onClick={() => {
            this.props.onClick && this.props.onClick()
        }}>
            {
                this.props.isChecked ? <span className="item-active-line"></span> : null
            }
            <div className={itemIconClassname}>
                <ReIcon className='icon' icon={this.props.icon}/>
            </div>
            <div className={itemTitleClassname}>{this.props.title}</div>
        </div>
    }

}